#g5-container {
    .g-colorpicker {
        @extend %g-transparent-bg;
        position: relative;
        border-radius: $core-border-radius;
        max-width: 100%;

        input {
            color: #333;
            width: 100% !important;
        }

        i {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 2;
        }

        &.light-text {
            input, i {
                color: $white;
            }
        }
    }

    .cp-sprite {
        background-image: url();
    }

    /* Panel */
    .cp-wrapper {
        position: absolute;
        width: 173px;
        height: 205px;
        background: white;
        border: solid 1px #CCC;
        box-shadow: 0 0 20px rgba(0, 0, 0, .2);
        z-index: 9999999;
        box-sizing: content-box;
        display: none;
    }

    .cp-wrapper.cp-visible {
        display: block;
    }

    /* Panel positioning */
    .cp-position-top .cp-wrapper {
        top: -154px;
    }

    .cp-position-right .cp-wrapper {
        right: 0;
    }

    .cp-position-bottom .cp-wrapper {
        top: auto;
    }

    .cp-position-left .cp-wrapper {
        left: 0;
    }

    .cp-with-opacity.cp-wrapper {
        width: 194px;
    }

    .cp-wrapper .cp-grid {
        position: absolute;
        top: 1px;
        left: 1px;
        width: 150px;
        height: 150px;
        background-position: -120px 0;
        cursor: crosshair;
    }

    .cp-wrapper .cp-grid-inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        height: 150px;
    }

    .cp-mode-saturation .cp-grid {
        background-position: -420px 0;
    }

    .cp-mode-saturation .cp-grid-inner {
        background-position: -270px 0;
        background-image: inherit;
    }

    .cp-mode-brightness .cp-grid {
        background-position: -570px 0;
    }

    .cp-mode-brightness .cp-grid-inner {
        background-color: black;
    }

    .cp-mode-wheel .cp-grid {
        background-position: -720px 0;
    }

    .cp-slider,
    .cp-opacity-slider {
        position: absolute;
        top: 1px;
        left: 152px;
        width: 20px;
        height: 150px;
        background-color: white;
        background-position: 0 0;
        cursor: row-resize;
    }

    .cp-mode-saturation .cp-slider {
        background-position: -60px 0;
    }

    .cp-mode-brightness .cp-slider {
        background-position: -20px 0;
    }

    .cp-mode-wheel .cp-slider {
        background-position: -20px 0;
    }

    .cp-opacity-slider {
        left: 173px;
        background-position: -40px 0;
        display: none;
    }

    .cp-with-opacity .cp-opacity-slider {
        display: block;
    }

    /* Pickers */
    .cp-grid .cp-picker {
        position: absolute;
        top: 70px;
        left: 70px;
        width: 12px;
        height: 12px;
        border: solid 1px black;
        border-radius: 10px;
        margin-top: -6px;
        margin-left: -6px;
        background: none;
    }

    .cp-grid .cp-picker > div {
        position: absolute;
        top: 0;
        left: 0;
        width: 8px;
        height: 8px;
        border-radius: 8px;
        border: solid 2px white;
        box-sizing: content-box;
    }

    .cp-picker {
        position: absolute;
        top: 0;
        left: 0;
        width: 18px;
        height: 2px;
        background: white;
        border: solid 1px black;
        margin-top: -2px;
        box-sizing: content-box;
        z-index: 2;
    }

    /* Tabs */
    .cp-tabs {
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        color: #777;
        left: 0;
        right: 0;
        background: #eee;


        > div {
            display: inline-block;
            padding: 6px 0 4px;
            font-family: Helvetica, sans-serif;
            font-size: 11px;
            border-left: 1px solid #ddd;
            width: 48px;
            border-right: 0;
            text-align: center;
            cursor: pointer;

            &:first-child {
                border-left: 0;
            }

            &.active {
                background-color: #fff;
            }

            &.cp-tab-transp {
                width: 100%;
                border-top: 1px solid #ddd;
            }
        }
    }
    /* Default theme */
    .cp-theme-default.cp-wrapper {
        width: auto;
        display: inline-block;
    }
    .cp-theme-default .cp-input {
        height: 20px;
        width: auto;
        display: inline-block;
        padding-left: 26px;
    }
    .cp-theme-default.cp-position-right .cp-input {
        padding-right: 26px;
        padding-left: inherit;
    }

    .input-group .cp-theme-bootstrap:not(:first-child) .cp-input {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}
